<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- 必要的标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link crossorigin="anonymous" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA=="
          href="https://lib.baomitu.com/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        #navbar-left{
            background:#3B3E47;
            height: 1000px;
        }
        #window{
            height: 1000px;
            background: #EBEBEB;
        }
        a{
            text-decoration: none;
            color: #80878D;
        }

        #main_nav{
            height: 600px;
            list-style: none;
            margin-top: 30px;

        }
        li{
            margin-top: 25px;
            list-style-type: none;

        }
        a:hover{
            color: aliceblue;
            text-decoration: none;
        }
        img{
            width: 25px;
        }
        .img_right{
            width: 15px;
            margin-left: 20px;
        }
        .img_left{
            margin-right: 30px;
        }
        .ul_inside{
            height: auto;
        }
        ul ul{
            display: none;
        }
        .ul_outside:hover ul{
            display: block;
        }
        .ul_inside li a{
            text-decoration: none;
            color: #80878D;
        }
        .ul_inside li a:hover{
            text-decoration: none;
            color: #80878D;
        }
        ul li a:hover img:nth-of-type(2){
            transform:rotate(90deg);
        }
        .box_1{
            width: 530px;
            height: 200px;
            border: solid 1px #62B85F;
            margin: 50px auto;

        }
        .box_2{
            width: 530px;
            height: 70px;
            border: solid 1px #39B5F1;
            margin: 0 auto;
            margin-top: 20px;
        }
        .box_1 div:nth-of-type(1){
            width: 530px;
            height: 30px;
            border-bottom: solid 1px;
            background-color:#62B85F;
            line-height: 30px;
            color: white;
            font-family: "楷体";
            font-size: 15px;
        }
        .box_1 div:nth-of-type(2){
            width: 530px;
            height: 115px;
            font-family: "楷体";
            font-size: 13px;
            text-indent: 2em;
            line-height: 1.5;
            padding-top: 10px;
        }
        .box_1 div:nth-of-type(3){
            width: 530px;
            height: 70px;
            font-family: "楷体";
            font-size: 13px;
            text-indent: 2em;
            line-height: 1.5;
            margin-top: 10px;
        }
        .box_2 div:nth-of-type(1){
            width: 530px;
            height: 30px;
            border-bottom: solid 1px;
            background-color:#39B5F1;
            line-height: 30px;
            color: white;
            font-family: "楷体";
            font-size: 15px;
        }
        .box_2 div:nth-of-type(2){
            width: 530px;
            height: 50px;
            font-family: "楷体";
            font-size: 13px;
            text-indent: 2em;
            line-height: 1.5;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<!--<script type="text/javascript">-->
<!--    $(function (){-->
<!--        $("#main_nav li").click(function (){-->
<!--            $(this).children().stop().slideToggle();-->
<!--        });-->
<!--    });-->
<!--</script>-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2" id="navbar-left">
            <ul id="main_nav" >
                <li class="ul_outside"><a href="#"><img src="/img/左箭头.png"></a></li>
                <li class="ul_outside"><a href="#"><img src="/img/管理分组.png" class="img_left">管理通讯录<img src="/img/右箭头.png" class="img_right"></a>
                    <ul class="ul_inside">
                        <li><a href="http://localhost:8080/tel/new">新建联系人</a></li>
                        <li><a href="http://localhost:8080/addGroup/new">新增分组</a></li>
                        <li><a href="#">退出登录</a></li>
                    </ul>
                </li>
                <li class="ul_outside"><a href="#"><img src="/img/首页菜单图标.png" class="img_left">管理分组<img src="/img/右箭头.png" class="img_right"></a>
                    <ul class="ul_inside">
                        <li><a href="http://localhost:8080/addGroup">查看/编辑分组</a></li>
                    </ul>
                </li>
                <li class="ul_outside"><a href="#"><img src="/img/首页菜单图标.png" class="img_left">管理联系人<img src="/img/右箭头.png" class="img_right"></a>
                    <ul class="ul_inside">
                        <li><a href="http://localhost:8080/linkman">查看/编辑联系人</a></li>
                    </ul>
                </li>

            </ul>
        </div>
        <div class="col-md-10" id="window">
            <table cellspacing="0">
                <tr>
                    <td>联系人姓名</td>
                    <td>联系人性别</td>
                    <td>动作</td>
                </tr>

                <tr th:each=" lm :${displayLinkman}">
                    <td th:text="${lm.name}"></td>
                    <td th:text="${lm.sex}"></td>
                    <td>
                        <a th:href="@{/linkman/update(id=${lm.linkman_id})}" class="btn btn-info btn-sm">更新</a>
                        <a th:href="@{/linkman/delete(id=${lm.linkman_id})}"
                           class="btn btn-danger btn-sm"
                           onclick="if (!(confirm('您确定要删除这个联系人吗'))) return false"


                        >删除</a>
                    </td>
                </tr>


            </table>

        </div>
    </div>
</div>

</body>
</html>